<template>
  <scroll-view class="content-info" scroll-y>
    <!-- 轮播图区域 -->
    <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff"
      indicator-dots circular autoplay>
      <swiper-item>
        <image src="https://jeoz.top:3000/img/banner1.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://jeoz.top:3000/img/banner2.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://jeoz.top:3000/img/banner3.jpg"></image>
      </swiper-item>
    </swiper>
    <!-- 推荐歌单区域 -->
    <view class="content-info-list">
      <view class="list-title">推荐歌单</view>
      <view class="list-inner">
        <scroll-view scroll-x style="white-space: nowrap;">
          <view class="list-item" v-for="(item, i) in songSheet" :key="i" @click="toMusicList(i)">
            <image :src="item.imgUrl"></image>
            <view>{{item.title}}</view>
            <view class="gray-border"></view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 我的歌单区域 -->
    <view class="content-info-mylist">
      <view class="mylist-title">我的歌单</view>
      <view class="mylist-inner">
        <!-- 我喜欢的音乐区域 -->
        <view class="mylist-inner-left glass-effect-left" @click="toMusicList(-1)">
          <image :src="musicMyList[0].imgUrl"></image>
          <view class="caption">我喜欢的音乐</view>
          <view class="gray-border"></view>
        </view>
        <!-- 最近播放的音乐区域 -->
        <view class="mylist-inner-right glass-effect-right" @click="toMusicList(-2)">
          <image :src="recentPlayList[0].imgUrl"></image>
          <view class="caption">最近播放</view>
          <view class="gray-border"></view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'

  export default {
    name: "music-info",
    computed: {
      ...mapState('m_music', ['item', 'musicMyList', 'recentPlayList', 'audioCtx'])
    },
    data() {
      return {
        songSheet: [{
            title: '动感电子音',
            imgUrl: 'https://jeoz.top:3000/img/musiclist_one.jpg',
          },
          {
            title: '燃到爆BGM',
            imgUrl: 'https://jeoz.top:3000/img/musiclist_two.jpg',
          },
          {
            title: '治愈系纯乐',
            imgUrl: 'https://jeoz.top:3000/img/musiclist_three.jpg',
          },
          {
            title: '宝藏挖掘机',
            imgUrl: 'https://jeoz.top:3000/img/musiclist_four.jpg',
          },
          {
            title: '独享美式Pop',
            imgUrl: 'https://jeoz.top:3000/img/musiclist_five.jpg',
          },
          {
            title: '肾上素飙升',
            imgUrl: 'https://jeoz.top:3000/img/musiclist_six.jpg',
          }
        ]
      };
    },
    methods: {
      ...mapMutations('m_music', ['updateSongSheetList']),
      // 点击跳转到歌单列表事件
      toMusicList(indexList) {
        this.updateSongSheetList(indexList)
        this.$emit('data-updated');
      },
    }
  }
</script>

<style lang="scss">
  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .content-info {
    height: calc(100% - 82rpx);

    // 轮播图
    .content-info-slide {
      height: 302rpx;
      padding: 20rpx 40rpx 0 40rpx;
      margin-bottom: 20px;
      border-radius: 10rpx;
    }

    .content-info-slide image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }

    .content-info-portal {
      display: flex;
      margin-bottom: 15px;
    }

    .content-info-portal>view {
      flex: 1;
      font-size: 11pt;
      text-align: center;
    }

    .content-info-portal image {
      width: 120rpx;
      height: 120rpx;
      display: block;
      margin: 20rpx auto;
    }

    // 推荐歌单
    .content-info-list {
      font-size: 11pt;
      margin-bottom: 20rpx;

      .list-title {
        height: 50rpx;
        line-height: 50rpx;
        border-left: 5px solid #fba007;
        padding-left: 20rpx;
        margin: 10rpx 35rpx;
      }

      .list-inner {
        margin: 0 40rpx;

        .list-item {
          position: relative;
          display: inline-block;
          margin-right: 36rpx;
          padding-top: 10rpx;

          .gray-border {
            position: absolute;
            top: -4%;
            left: 5%;
            width: 180rpx;
            height: 200rpx;
            border-radius: 10rpx;
            background-color: #eee;
            z-index: -1;
          }
        }

        .list-item:last-child {
          margin-right: 0; // 去除最后一个元素的右侧间距
        }

        .list-item image {
          display: block;
          width: 200rpx;
          height: 200rpx;
          margin: 0 auto;
          border-radius: 10rpx;
          box-shadow: 4rpx 4rpx 4rpx #cfcfcf;
        }

        .list-item view {
          width: 200rpx;
          margin: 10rpx auto;
          font-size: 10pt;
          text-align: center;
        }
      }
    }

    // 我的歌单
    .content-info-mylist {
      font-size: 11pt;

      .mylist-title {
        height: 50rpx;
        line-height: 50rpx;
        border-left: 5px solid #fba007;
        padding-left: 20rpx;
        margin: 20rpx 35rpx;
      }

      .mylist-inner {
        display: flex;

        .mylist-inner-left {
          height: 200rpx;
          align-items: center;
          width: 436rpx;
          margin-left: 40rpx;
          margin-right: 36rpx;
          background-color: #ccc;
          border-radius: 10rpx;
        }

        .mylist-inner-left>image {
          width: 436rpx;
          height: 200rpx;
          border-radius: 10rpx;
          box-shadow: 4rpx 4rpx 4rpx #cfcfcf;
        }

        .mylist-inner-right {
          height: 200rpx;
          align-items: center;
          flex: 1;
          margin-right: 40rpx;
          background-color: #ccc;
          border-radius: 10rpx;
        }

        .mylist-inner-right>image {
          width: 100%;
          height: 200rpx;
          border-radius: 10rpx;
          box-shadow: 4rpx 4rpx 4rpx #cfcfcf;
        }

        // 磨砂遮罩样式
        .glass-effect-left,
        .glass-effect-right {
          position: relative;
        }

        .glass-effect-left::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
          backdrop-filter: blur(1px);
          /* 调整模糊效果的强度 */
          z-index: 1;
          /* 确保玻璃磨砂效果在图片之上 */
        }

        .glass-effect-left::before {
          content: '';
          background-image: url('../../static/music_icons/like.png');
          background-size: cover;
          font-size: 30px;
          position: absolute;
          /* 设置定位属性 */
          top: 40%;
          /* 将爱心图标垂直居中 */
          left: 50%;
          /* 将爱心图标水平居中 */
          transform: translate(-50%, -50%);
          /* 调整爱心图标位置 */
          z-index: 2;
          /* 确保爱心图标在磨砂效果之上 */
          display: inline-block;
          width: 30px;
          height: 30px;
        }

        .glass-effect-right::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
          backdrop-filter: blur(1px);
          /* 调整模糊效果的强度 */
          z-index: 1;
          /* 确保玻璃磨砂效果在图片之上 */
        }

        .glass-effect-right::before {
          content: '';
          background-image: url('../../static/music_icons/recently.png');
          background-size: cover;
          font-size: 30px;
          position: absolute;
          /* 设置定位属性 */
          top: 40%;
          /* 将爱心图标垂直居中 */
          left: 50%;
          /* 将爱心图标水平居中 */
          transform: translate(-50%, -50%);
          /* 调整爱心图标位置 */
          z-index: 2;
          /* 确保爱心图标在磨砂效果之上 */
          display: inline-block;
          width: 30px;
          height: 30px;
        }

        .glass-effect-left .caption {
          position: absolute;
          top: 50%;
          /* 将文本容器放置在爱心图标下面 */
          left: 50%;
          /* 将文本容器放置在水平方向上居中 */
          transform: translate(-50%, 10px);
          /* 调整容器的位置 */
          font-size: 14px;
          /* 调整文本的大小 */
          color: white;
          /* 设置文本的颜色 */
          z-index: 2;
        }

        .glass-effect-right .caption {
          position: absolute;
          top: 50%;
          /* 将文本容器放置在爱心图标下面 */
          left: 40%;
          /* 将文本容器放置在水平方向上居中 */
          transform: translate(-32%, 10px);
          /* 调整容器的位置 */
          font-size: 14px;
          /* 调整文本的大小 */
          color: white;
          /* 设置文本的颜色 */
          z-index: 2;
        }

        .glass-effect-left .gray-border {
          position: absolute;
          top: -6%;
          left: 3.5%;
          width: 405rpx;
          height: 200rpx;
          border-radius: 10rpx;
          background-color: #eee;
          z-index: -1;
        }

        .glass-effect-right .gray-border {
          position: absolute;
          top: -6%;
          left: 4%;
          width: 180rpx;
          height: 200rpx;
          border-radius: 10rpx;
          background-color: #eee;
          z-index: -1;
        }

        .mylist-inner-left-content>text {
          font-size: 9pt;
          color: #aaa;
        }
      }
    }
  }
</style>